// 声明首页用到的图表变量
// 模具状态分布图表
var moldStatusDistributionEcharts;
// 压铸、浇筑、制芯模具故障率变量
var yazhuMoldFailureRateEcharts,jiaozhuMoldFailureRateEcharts,zhixinMoldFailureRateEcharts,
// 模具维护或维修工单数分布图表
moldPmTicketNumDistributionEcharts,moldRepairTicketNumDistributionEcharts;

// 故障次数TOP模具图表、模具故障次数图表
var faultTimeTopMoldEcharts,moldFaultClassifyEcharts;


var devFaultTypeTimeEchart,devFaultEchart,
// 设备维护或维修工单数分布图表
devPmTicketNumDistributionEcharts,devRepairTicketNumDistributionEcharts;

var vm = new Vue({
    el: '#main_app',
    data: {
        password: '',
        menuList: [],
        // 模具状态分布
        moldStatusDistributionEchartsOption : {
            title: {
                text: '模具状态分布',
                subtext: '',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            series: [
                {
                    type: 'pie',
                    radius: '50%',
                    data: [
                        { value: 1048, name: '在用' },
                        { value: 735, name: '备用' },
                        { value: 580, name: '试模' },
                        { value: 484, name: '维护' },
                        { value: 110, name: '维修' },
                        { value: 167, name: '封存' },
                        { value: 134, name: '外借' },
                        { value: 185, name: '待维护' },
                        { value: 173, name: '委外维修' }
                    ],

                    label:{
                        show: true,
                        formatter: '{b} : {c} ({d}%)'
                    },
                    labelLine :{show:true}
                    ,
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        },
        // 不同模具类别故障率Option模板
        moldTypeFailureRateOptionTemplate: {
            title: {
                text: '压铸模具故障率',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'center',
                bottom:'bottom'
            },
            color:['#f2091e','#3b9649'],
            series: [
                {
                    name: 'Access From',
                    type: 'pie',
                    radius: '50%',
                    data: [
                        { value: 1048, name: '故障' },
                        { value: 735, name: '正常' }
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        },
        // 发生模具故障次数TOP模具统计
        moldFaultTopReportEchartsOption: {
            title: {
                text: '模具故障次数TOP统计',
                x: 'center',
                y: 'top',
                textAlign: 'left'
            },
            toolbox: {
                show: true,
                feature: {
                    magicType: {show: true, type: ['line', 'bar']},
                    dataView: {show: true, readOnly: false},
                    saveAsImage: {show: true}
                },
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                },
                formatter: function (params) {
                    var tar = params[1];
                    return tar.name + '<br/>' + tar.seriesName + ' : ' + tar.value;
                }
            },
            color: ['#4472c4'],
            tooltip: {
                trigger: 'axis'
            },
            grid: {
                bottom: '15%'
            },
            xAxis: [{
                type: 'category',
                data: [],
                axisLabel: { //坐标轴刻度标签的相关设置。
                    rotate: 35
                }
            }],
            yAxis: [
                {
                    type: 'value',
                    minInterval: 1
                }
            ],
            series: [
                {
                    name: "故障次数",
                    type: 'bar',
                    data: []
                }
            ]
        },
        // 设备PM工单项模板
        devPmTicketOptionTemplate:{
            title: {
                text: '',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{b} : {c} ({d}%)'
            },
            legend: {
                bottom: 5
            },
            label: {
                normal: {
                    formatter: 'afafa',
                    position: 'inside'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '15%',
                top:'15%',
                containLabel: true
            },
            //设置饼状图每个颜色块的颜色
            color : [ '#4472c4', '#ed7d31'],
            series: [
                {
                    name: 'PM工单完成率统计',
                    type: 'pie',
                    radius: '65%',
                    data: [],
                    label: {
                        show: true,
                        position: 'inside',
                        formatter: '{c} : {d}%'
                    },
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        },
        faultTimeTopMoldEchartsOption: {
            title: {
                text: '模具故障次数TOP统计',
                x: 'center',
                y: 'top',
                textAlign: 'left'
            },
            toolbox: {
                show: true,
                feature: {
                    magicType: {show: true, type: ['line', 'bar']},
                    dataView: {show: true, readOnly: false},
                    saveAsImage: {show: true}
                },
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                },
                formatter: function (params) {
                    var tar = params[1];
                    return tar.name + '<br/>' + tar.seriesName + ' : ' + tar.value;
                }
            },
            color: ['#4472c4'],
            tooltip: {
                trigger: 'axis'
            },
            grid: {
                bottom: '15%'
            },
            xAxis: [{
                type: 'category',
                data: [],
                axisLabel: { //坐标轴刻度标签的相关设置。
                    rotate: 35
                }
            }],
            yAxis: [
                {
                    type: 'value',
                    minInterval: 1
                }
            ],
            series: [
                {
                    name: "故障次数",
                    type: 'bar',
                    data: []
                }
            ]
        },
        // 不同模具故障分类发生次数图表Option
        moldFaultClassifyEchartsOption: {
            title: {
                text: '模具故障分类次数统计',
                x: 'center',
                y: 'top',
                textAlign: 'left'
            },
            color:['#4472c4'],
            tooltip: {
                trigger: 'axis',
            },
            toolbox: {
                show: true,
                feature: {
                    magicType: {show: true, type: ['line', 'bar']},
                    dataView: {show: true, readOnly: false},
                    saveAsImage: {show: true}
                },
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                },
                formatter: function (params) {
                    var tar = params[1];
                    return tar.name + '<br/>' + tar.seriesName + ' : ' + tar.value;
                }
            },
            grid:{
                bottom:'15%'
            },
            xAxis: [{
                type: 'category',
                data: [],
                axisLabel: { //坐标轴刻度标签的相关设置。
                    rotate: 50
                },
            }],
            yAxis: [
                {
                    type: 'value',
                    minInterval: 1
                }
            ],
            series: [
                {
                    name: '故障次数',
                    type: 'bar',
                    barWidth: '60%',
                    data: []
                }
            ]
        },
        // PM工单数量分布图option
        devPmTicketNumDistributionOption:{
            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            title:{
                text:'模具PM工单数量分布',
                subtext:'只展示近半年PM工单统计',
                left:'center'
            },
            legend: {
                data: ['完成工单数量', '延期工单数量'],
                bottom: 0
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '15%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    data: ['四月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月', '第一周', '第二周', '第三周']
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            color:['#4472c4','#ed7d31'],
            series: [
                {
                    name: '完成工单数量',
                    type: 'bar',
                    stack: 'PM工单数量分布',
                    barWidth: '40%',
                    label: {
                        show: true,
                        position: 'inside'
                    },
                    data: []
                },
                {
                    name: '延期工单数量',
                    type: 'bar',
                    stack: 'PM工单数量分布',
                    label: {
                        show: true,
                        position: 'inside'
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: []
                }
            ]
        },
        // 设备维修工单数量分布图option
        devRepairTicketNumDistributionOption : {
            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            title:{
                text:'模具维修工单数量分布',
                subtext:'只展示近半年维修工单统计',
                left:'center'
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '10%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    data: []
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            color:['#4472c4'],
            series: [
                {
                    name: '工单数',
                    type: 'bar',
                    barWidth: '50%',
                    label: {
                        show: true,
                        position: 'inside'
                    },
                    data: [734,620, 732, 701, 734,620, 732, 701, 35, 47, 34]
                }
            ]
        }
    },
    methods: {
        // 加载基地PM工单完成情况统计 {curDeptId: '01',title:'机总五车间',echartTarget: devStatusEchart}
        // 加载模具不同类别故障率统计数据
        loadMoldTypeFailureRataStatData: function(loadParam){
            // 加载设备状态概览
            Ajax.request({
                url: "../device/stat/pmCompleteRate",
                params: JSON.stringify({curDeptId: loadParam.curDeptId}),
                type: "POST",
                contentType: "application/json",
                successCallback: function (res) {
                    loadParam.echartTarget.hideLoading();
                    var option = {
                        title: {
                            text: loadParam.title,
                            subtext: ''
                        },
                        // series: {
                        //     data: res.devStatusStat.seriesData
                        // },
                        // legend: {
                        //     data: res.devStatusStat.legendData
                        // }
                    };
                    if(res.devStatusStat.seriesData.length == 0){
                        option.title.subtext = '当前组织下暂无PM工单';
                    }
                    loadParam.echartTarget.setOption(option);
                }
            });
        },
        getInfo:function(){
            // 加载设备故障TOP数统计
            Ajax.request({
                url: "../device/stat/pmTicketNumDistribution",
                type: "POST",
                params: JSON.stringify({statMonthlyNum: 6}),
                contentType: "application/json",
                successCallback: function (res) {
                    var statResult = res.statResult;
                    var option = {
                        xAxis: {
                            data: statResult.xaxisData
                        },
                        series: statResult.barSeriesData
                    };
                    devPmTicketNumDistributionEcharts.setOption(option);
                }
            });
            // 加载设备维修工单数量分布统计数据
            Ajax.request({
                url: "../device/stat/repairTicketNumDistribution",
                type: "POST",
                params: JSON.stringify({statMonthlyNum: 6}),
                contentType: "application/json",
                successCallback: function (res) {
                    // 需要从
                    var statResult = res.statResult;
                    var option = {
                        xAxis: {
                            data: statResult.xaxisData
                        },
                        series: statResult.barSeriesData
                    };
                    devRepairTicketNumDistributionEcharts.setOption(option);
                }
            });

            // 加载压铸模具故障率统计信息
            this.loadMoldTypeFailureRataStatData({'typeCode': 'YZ','title':'压铸模具故障率','echartTarget': yazhuMoldFailureRateEcharts});
            // 加载浇筑模具故障率统计信息
            this.loadMoldTypeFailureRataStatData({'typeCode': 'JZ','title':'浇筑模具故障率','echartTarget': jiaozhuMoldFailureRateEcharts});
            // 加载制芯模具故障率统计信息
            this.loadMoldTypeFailureRataStatData({'typeCode': 'ZX','title':'制芯模具故障率','echartTarget': zhixinMoldFailureRateEcharts});

            // 加载发生故障次数的TOP模具统计
            Ajax.request({
                url: "../mould/stat/faultTimesTopStat",
                params: {topNum: 10},
                type: "POST",
                successCallback: function (res) {
                    faultTimeTopMoldEcharts.setOption({
                        xAxis: {
                            data: res.faultTimesTopStatData.devNames
                        },
                        series: {
                            data: res.faultTimesTopStatData.faultTimes
                        }
                    });
                }
            });

            // 统计模具故障类别次数和累计百分比
            Ajax.request({
                url: "../mould/stat/faultClassifyTimes",
                type: "GET",
                successCallback: function (res) {
                    moldFaultClassifyEcharts.setOption({
                        xAxis: {
                            data: res.faultClassifyTimesStatData.devNames
                        },
                        series: {
                            data: res.faultClassifyTimesStatData.faultTimes
                        }
                    });
                }
            });
        }
    },
    mounted: function(){
        // 模具PM工单数分布图表
        devPmTicketNumDistributionEcharts = echarts.init(document.getElementById("devPmTicketNumDistributionEcharts"));
        devPmTicketNumDistributionEcharts.setOption(this.devPmTicketNumDistributionOption, true);
        // 模具维修工单数分布图表
        devRepairTicketNumDistributionEcharts = echarts.init(document.getElementById("devRepairTicketNumDistributionEcharts"));
        devRepairTicketNumDistributionEcharts.setOption(this.devRepairTicketNumDistributionOption, true);

        // 模具状态分布统计
        moldStatusDistributionEcharts = echarts.init(document.getElementById("moldStatusDistributionEcharts"));
        moldStatusDistributionEcharts.setOption(this.moldStatusDistributionEchartsOption, true);
        // 压铸模具故障率统计
        yazhuMoldFailureRateEcharts = echarts.init(document.getElementById("yazhuMoldFailureRateEcharts"));
        yazhuMoldFailureRateEcharts.setOption(this.moldTypeFailureRateOptionTemplate, true);
        // 浇筑模具故障率统计
        jiaozhuMoldFailureRateEcharts = echarts.init(document.getElementById("jiaozhuMoldFailureRateEcharts"));
        jiaozhuMoldFailureRateEcharts.setOption(this.moldTypeFailureRateOptionTemplate, true);
        // 制芯模具故障率统计
        zhixinMoldFailureRateEcharts = echarts.init(document.getElementById("zhixinMoldFailureRateEcharts"));
        zhixinMoldFailureRateEcharts.setOption(this.moldTypeFailureRateOptionTemplate, true);

        // 发生模具故障次数的TOP模具报表
        faultTimeTopMoldEcharts = echarts.init(document.getElementById("faultTimeTopMoldEcharts"));
        faultTimeTopMoldEcharts.setOption(this.faultTimeTopMoldEchartsOption, true);

        // 发生模具故障次数的TOP模具报表
        moldFaultClassifyEcharts = echarts.init(document.getElementById("moldFaultClassifyEcharts"));
        moldFaultClassifyEcharts.setOption(this.moldFaultClassifyEchartsOption, true);

        // 加载数据
        this.getInfo();
    }

});
